<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>allen canvas 的练习</title>
</head>
<body>

    <canvas id="mycanvas"></canvas>

    <script type="text/javascript">
        console.log(window);
        var canvas = document.getElementById('mycanvas'),
            c      = canvas.getContext('2d'),
            timer,
            mouseX,
            mouseY,
            canvasWidth,
            canvasHeight,
            maxRadius = 35,
            colorArray = ['#272F32','#9DBDC6','#FF3D2E','#DAEAEF'],//气泡数组颜色
            circleArray = []; //气泡空数组
      var myCircle = new Circle(30,80,10);
      //自适应窗口
      window.addEventListener('resize',resizeCanvas,false);

      function resizeCanvas(){
        //更新窗口大小
          if (!!canvas) {
             canvasHeight = canvas.height = window.innerHeight;
             canvasWidth = canvas.width = window.innerWidth;
          }
        //重新绘制界面
        updateAll();
        // console.error('这里带有功能没写');
      }
      //鼠标移动
      canvas.onmousemove = function(e) {

          mouseX = e.clientX;
          mouseY = e.clientY;
      }

      //气泡函数
      function  Circle(xCoordinate, yCoordinate, radius) {
        var randomNumber = Math.floor(Math.random() * 4); // 0-4的随机数
        var randomTrueOrFalse = Math.floor(Math.random() * 2); // 0 -2 的随机数
        var randomTrueOrFalseTow = Math.floor(Math.random() * 2); //0-2的随机数

        //设置坐标和半径
        this.xCoordinate = xCoordinate;
        this.yCoordinate = yCoordinate;
        this.radius = radius;
        this.color = colorArray[randomNumber]; //随机气泡的颜色值

        //气泡移动x坐标判断增减
        if(randomTrueOrFalse === 1){
          this.xVelocity = -Math.random() * 1;
        }else {
          this.xVelocity = Math.random() * 1;
        }

        //气泡移动 y  坐标判断增减
        if(randomTrueOrFalse === 1){
          this.yVelocity = -Math.random() * 1;
        }else {
          this.yVelocity = Math.random() * 1;
        }



        //距离接近0 时 增加半径、
        this.update = function(){
          this.xCoordinate += this.xVelocity;
          this.yCoordinate += this.yVelocity;
          var xDistance = mouseX - this.xCoordinate;  //x距离（鼠标x坐标 -  气泡x坐标 = 距离）
          var yDistance = mouseY - this.yCoordinate;  //y距离（鼠标y坐标 -  气泡y坐标 = 距离）
          var originalRadius = radius;
          //移动函数
          if(this.xCoordinate + this.radius > canvasWidth || this.xCoordinate - this.radius < 0){
            this.xVelocity = -this.xVelocity;
          }
          if (this.yCoordinate + this.radius > canvasHeight || this.yCoordinate - this.radius < 0) {
            this.yVelocity = -this.yVelocity;
          }

          //半径增减函数，气泡最大半径 maxRadius  = 35
          if (xDistance < 50 && xDistance > -50 && this.radius < maxRadius && yDistance < 50 && yDistance > -50) {
              this.radius += 2;
          } else if ((xDistance >= 50 && originalRadius < this.radius) || (xDistance <= -50 && originalRadius < this.radius) || (yDistance >= 50 && originalRadius < this.radius) || (yDistance <= -50 && originalRadius < this.radius)) {
              if (this.radius > 3) {
                  this.radius -= 2;
              }
          };
          //绘制气泡
          this.draw();
      }
      this.draw = function (){
        c.beginPath();
        c.arc(this.xCoordinate, this.yCoordinate, this.radius, 0, Math.PI * 2);
        c.fillStyle = this.color;
        c.fill();
      }

    }



    //气泡数量
    function count (){

      //循环气泡数量，将随机数据push 到 circleArray 数组中
      for (var i = 0; i < 800; i++) {
        var randomXCoorinate = Math.random() * canvasWidth;
        var randomYCoorinate = Math.random() * canvasHeight;
        var randomRadius = Math.random() * 5;

        circleArray.push(new Circle(randomXCoorinate,randomYCoorinate,randomRadius))

      }
    }
    //更新函数
    function updateAll() {

        c.clearRect(0,0, canvasWidth, canvasHeight);    //清空 Canvas
        myCircle.update();
        for (var i = 0; i < circleArray.length; i++) {
                circleArray[i].update();
            }
        clearTimeout(timer);
        timer = setTimeout(updateAll, 8)
    }
    resizeCanvas();
    count();
    updateAll();




    </script>

</body>
</html>
